<template>
  <div class="home" style="height:100%;">
    <div class="mintor-body">
      <div v-if="!monitorData.isLoadPlayer">
        <!-- <Form class="monitor-form" :label-width="300" inline>
          <FormItem label="当前路段:" :label-width="160">
            <Select v-model="switchWay" :label-width="160">
              <Option
                v-for="(item, index) in wayList"
                :value="item.wayName"
                :key="index"
              >
                {{ item.wayName }}
              </Option>
            </Select>
          </FormItem>
        </Form> -->
        <div style="width:95%; margin: 0 auto; margin-top:2.5%">
          <monitor-grid></monitor-grid>
        </div>
        <!-- <div style="width:300px; height:100px"></div>  -->
      </div>
      <video-player-detail v-else></video-player-detail>
    </div>

    <!-- 错误提示框 暂时不用-->
    <!-- <Modal v-model="showError" draggable width="500" :styles="{top: '30vh'}">
      <p slot="header" style="height:40px;line-height:40px;color:#f60;text-align:center;font-size:30px;">
        <Icon type="ios-information-circle"></Icon>
        <span>提示</span>
      </p>
      <div style="text-align:center;font-size:24px;height:60px;line-height:60px;">
        <p>当前的视频流不可用，请尝试其他站点</p>
      </div>
      <div slot="footer">
        <Button style="font-size:24px;"
        type="error" size="large" long @click="updateVideoStreamState">确定</Button>
      </div>
    </Modal> -->
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

import MonitorMain from "./monitorMain";
import MonitorGrid from "./monitorGrid";
import VideoPlayerDetail from "./videoPlayerDetail";

export default {
  components: {
    MonitorMain,
    MonitorGrid,
    VideoPlayerDetail
  },
  data() {
    return {
      showError: false
    };
  },
  computed: {
    ...mapState(["monitorData", "videoPlayerState", "wayList", "switchWay"]),
    switchWay: {
      get() {
        return this.$store.state.switchWay;
      },
      set(val) {
        this.$store.dispatch("changeSwitchWay", val);
      }
    }
  },
  watch: {
    videoPlayerState: {
      deep: true,
      handler(value) {
        //console.log(value)
        if (value.getStreamUrlState === 404) this.showError = true;
        if (value.getStreamUrlState === 200) this.showError = false;
      }
    }
  },
  methods: {
    ...mapActions([
      "getStationVideoStreamUrl",
      "updateGetStationVideoStreamState200",
      "handleLogOut"
    ])
  },
  created() {
    //异常关闭则为null
    if (window.sessionStorage.getItem("tempFlag_monitor") == null) {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: "login"
        });
      });
    }
  },
  mounted() {
    window.onload = () => {
      if (window.sessionStorage.getItem("tempFlag_monitor") == "true") {
        window.sessionStorage.setItem("tempFlag_monitor", "false");
      }
    };
    window.onunload = function() {
      window.sessionStorage.setItem("tempFlag_monitor", "true");
      // window.sessionStorage["tempFlag"] = true;
    };
    window.onbeforeunload = function() {
      window.sessionStorage.setItem("tempFlag_monitor", "true");
      // window.sessionStorage["tempFlag"] = true;
    };
  }
};
</script>

<style lang="less">
@background-color: #0a4271 !important;
@font-color: #fff !important;

.monitor-home {
  padding: 20px 40px;
  // background-color: #0a4271;
  background: url("../../assets/bg.jpg") center;
  /* box-sizing: border-box; */
  //border:1px solid #F00;
}
.mintor-body {
  //border:1px solid #F00;
  margin-top: 0%;
}
.monitor-form .ivu-form {
  font-size: 2.4rem !important;
}
.monitor-form .ivu-form-item-label {
  font-size: 2.4rem !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-form-item-content {
  line-height: 40px;
}
.monitor-form .ivu-select-selected-value {
  font-size: 2.4rem !important;
  height: 32px !important;
  line-height: 32px !important;
  color: @font-color;
  font-weight: bold;
}
.monitor-form .ivu-select-selection {
  width: 180px;
  height: 32px !important;
  background-color: @background-color;
  border: 1px solid @background-color;
}
.monitor-form .ivu-select-dropdown {
  background-color: @background-color;
  max-height: 300px;
}
.monitor-form .ivu-select-item {
  color: @font-color;
  font-size: 2rem !important;
  font-weight: bold;
}
.monitor-form .ivu-select-item-selected,
.ivu-select-item-selected:hover {
  color: #52c41a !important;
}
.monitor-form .ivu-select-placeholder {
  font-size: 2.4rem !important;
  height: 32px !important;
  line-height: 32px !important;
  font-weight: bold;
}
.ivu-select-item-focus {
  background-color: @background-color;
}
.ivu-select-item:hover {
  background-color: #1081b3 !important;
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal {
    top: 90;
  }
}
.ivu-radio-wrapper-checked {
  border-color: #fff !important;
  color: #fff !important;
}
</style>
